<template>
  <div class="mh100vh pt100">
    <div class="f ac fs14">
      <div class="">请选择：</div>
      <div class="f ac" style="gap: 0 20px;">
        <div @click="selectItem(item)" v-for="item in list" :key="item.id" class="f ac mr20 poi">
          <div class="f ac xc rds50 radioBox rel" :style="{background:item.isChecked ? '#1890ff' : '#666',width:'20px',height:'20px'}">
            <div class="rds50 bgf" style="width:6px;height:6px;"></div>
            <div :class="isAllowAni && item.isChecked? '' : 'op0'">
              <div
                v-for="(dot, i) in item.dots" :key="i"
                class="abs rds50 trans3"
                :style="{top: dot.top, left: dot.left, background: dot.bgColor, width: dot.width, height: dot.height}"
              ></div>
            </div>
          </div>
          <div class="f1 ml5">张三</div>
        </div>
      </div>
      <!-- <div @click="selectItem(item)" v-for="item in radioList" :key="item.id" :class="['f ac mr20 poi rel pl20 trans5', item.isChecked ? 'checkedRaido' : 'radioBorder']">{{item.name}}</div> -->
    </div>
  </div>
</template>
<script src='./index.js'></script>
<style src='./index.css' scoped></style>